<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/include.js"></script>

</head>
<body>
<!-- 标题 -->
<h1 style="text-align: center;">实时日志</h1>
<h6 style="text-align: center;">1秒刷新一次</h6>

<div id="app">

    <div id="loggingText" contenteditable="true"
         style="width:100%;height: 500px;background-color: ghostwhite; overflow: auto;"></div>

    <!-- 操作栏 -->
    <div style="text-align: center;">
        <button onclick="$('#loggingText').text('')" style="color: green; height: 35px;">清屏</button>
        <button onclick="$('#loggingText').animate({scrollTop:$('#loggingText')[0].scrollHeight});"
                style="color: green; height: 35px;">滚动至底部
        </button>
        <button onclick="if(window.loggingAutoBottom){$(this).text('开启自动滚动');}else{$(this).text('关闭自动滚动');};window.loggingAutoBottom = !window.loggingAutoBottom"
                style="color: green; height: 35px; ">开启自动滚动
        </button>
    </div>

</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {

        }
    });
    function showInfo(data) {
        //日志内容
        let $loggingText = $("#loggingText");
        $loggingText.append(data);

        //是否开启自动底部
        if (window.loggingAutoBottom) {
            //滚动条自动到最底部
            $loggingText.scrollTop($loggingText[0].scrollHeight);
        }
    }
</script>
<script>
    //websocket对象
    let websocket = null;

    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        //动态获取域名或ip
        let hostname = window.location.hostname;
        let port = window.location.port;
        let socketUrl="ws://" + hostname +":" + port + "/webSocket/logging";
        websocket = new WebSocket(socketUrl);
    } else {
        errorMessage("您的浏览器不支持WebSocket");
    }

    //连接发生错误的回调方法
    websocket.onerror = function (e) {
        errorMessage("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        console.log("WebSocket连接成功")
    };

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        let data;
        if (!event.data) {
            return;
        }
        console.info(event.data)
        // data = JSON.parse(event.data);
        /*if (data.error) {
            errorMessage(data.error);
            return;
        }*/

        showInfo(event.data);
    };
    //连接关闭的回调方法
    websocket.onclose = function () {
        console.log("WebSocket连接关闭")
    };


</script>
<style>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }
</style>
</html>
